<template>
    <XiaDanHeaderCom/>
    <img :src="bigImgUrl" alt="">
    <div id="price">
        <p>特价</p>
        <div>
            <span id="youHui">￥{{newprice}}</span>
            <span id="yuanJia">￥{{yuanprice}}</span>
        </div>
    </div>
    <h3>
        {{name}}
    </h3>
    <div id="tuiJian">
        <p>推荐理由</p>
        <div>
            <ol>
                <li v-for="item of tuiJianLiYou" :key="item">
                    {{item}}
                </li>
            </ol>
        </div>
    </div>
    <XiaDanFooterCom :shopCart="this.$route.query"/>
</template>

<script>
    import XiaDanHeaderCom from "../components/XiaDan/XiaDanHeaderComzxw.vue";
    import XiaDanFooterCom from "../components/XiaDan/XiaDanFooterComzxw.vue";

    export default {
        name: "XiaDanView",
        data(){
            return{
                imgUrl:this.$route.query.imgUrl,
                bigImgUrl:this.$route.query.bigImgUrl,
                newprice:this.$route.query.newprice,
                yuanprice:this.$route.query.price,
                name:this.$route.query.name,
                tuiJianLiYou:this.$route.query.tuiJianLiYou,
                count:this.$route.query.count
            }
        },
        components:{
            XiaDanHeaderCom,
            XiaDanFooterCom
        }
    }
</script>

<style scoped>
    img{
        width: 100%;
    }
    #price{
        width: 100%;
        height: 80px;
        background: red;
        position: relative;
    }
    #price>p{
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        margin-left: 5%;
    }
    #price>div{
        position: absolute;
        bottom: 0;
    }
    #youHui{
        font-size: 30px;
        font-weight: bolder;
        color: #fff;
        margin-left: 5%;
    }
    #yuanJia{
        color: #fff;
        text-decoration: line-through;
    }
    h3{
        margin-left: 3%;
    }
    #tuiJian{
        width: 94%;
        height: 250px;
        margin: 0 auto;
    }
    #tuiJian>p{
        color: #999999;
        font-size: 12px;
    }
    #tuiJian>div{
        width: 100%;
        margin: 10px auto;
        height: 80px;
        background: #FAFAFA;
    }
    #tuiJian ol{
        width: 100%;
        height: 100%;
    }
    #tuiJian ol>li{
        margin-left: 8%;
        font-size: 12px;
        margin-top: 10px;
    }
</style>